<template>
  <div>
      <div style="width: 250px" class="imageFloat">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in itemInfo.skuImagesList" :key="item">
            <img :src="item.imgUrl" class="image">
          </el-carousel-item>
        </el-carousel>
    </div>
    <div class="titleFloat">
      <span>{{itemInfo.skuInfo.skuTitle}}</span>
      <div>
        <span>{{itemInfo.skuInfo.skuSubtitle}}</span>
      </div>
      <div>
        <h1 class="price">￥{{itemInfo.skuInfo.price}}</h1>
      </div>
      <div>
        <el-input-number v-model="cartRequest.num"  :min="1" :max="10" label="数量"></el-input-number>
        <el-button @click="addCart">加入购物车</el-button>
      </div>
    </div>
        <div class="clear">
          <el-descriptions title="详情">
              <el-descriptions-item :label="item.attrGroupName" v-for="item in itemInfo.attrGroupVos">
                <div v-for="attrVoList in item.attrVoList">
                  <span>{{attrVoList.attrVoName}}</span><br>
                  <span>{{attrVoList.attrVoValue}}</span>
                </div>
              </el-descriptions-item>
          </el-descriptions>
        </div>
    <div>

    </div>

  </div>
</template>

<script>
import { itemDetails,addCartItem } from "@/api/producer/skuInfo";
import router from "@/router";

export default {
  name: "SkuInfo",
  data() {
    return {
      itemInfo: {
        skuInfo: {},
        skuImagesList: [],
        saleAttrs: [],
        spuInfoDesc: {},
        attrGroupVos: []
      },
      cartRequest:{
        skuId:0,
        num:0
      }
    };

  },


  created() {
    this.getList();
  },

  methods: {
    /** 查询sku列表 */
    getList() {
      const skuId = this.$route.query.skuId;
      itemDetails(skuId).then(response => {
        this.itemInfo = response;
        console.log(this.itemInfo)
        this.itemInfo.skuInfo = response.skuInfo
        console.log(this.itemInfo.skuInfo)
      })
    },
    addCart(){
      this.cartRequest.skuId = this.itemInfo.skuInfo.skuId
      addCartItem(this.cartRequest).then(response => {
        this.$message({
          message: '加入购物车成功',
          type: 'success'
        });
        this.$router.push("/cartItem")
      })
    }
  }
};
</script>
<style>
.imageFloat {
  float: left;
}
.titleFloat {
  float: right;
}
.price{
  color: red;
}
.clear{
  clear:both;
}
</style>
